<template>
  <div id="app" class="container">
    <h1>题目详情展示</h1>
    <div v-for="(question, index) in questions" :key="question.questionId" class="question-item">
      <div class="question-title">题目 {{ index + 1 }}</div>
      <div class="question-content">{{ question.questionContent }}</div>

      <div v-if="question.questionType === 'single_choice'" class="options">
        <div v-for="(detail, index) in question.questionDetails.split('\n')" :key="index" class="option">
          {{ detail }}
        </div>
      </div>

      <div class="answer">学生答案: {{ question.studentAnswer }}</div>
      <div class="correct-answer">正确答案: {{ question.correctAnswer }}</div>
      <div class="question-type">题目类型: {{ getQuestionType(question.questionType) }}</div>
      <div :class="{'correctness correct': question.studentTrueOrFalse, 'correctness incorrect': !question.studentTrueOrFalse}">
        状态: {{ question.studentTrueOrFalse ? '正确' : '错误' }}
      </div>
    </div>
    <div class="score">
      总成绩: {{ score }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Test",
  data() {
    return {
      questions: [],
      score: 0
    };
  },
  mounted() {
    this.fetchQuestions();
  },
  methods: {
    fetchQuestions() {
      const assignmentId = this.$route.query.id;
      axios.get(`http://localhost:80/questions/assignment_review/${assignmentId}`)
          .then(response => {
            if (response.data.code === 0) {
              this.questions = response.data.data;
              this.calculateScore();
            } else {
              console.error('Failed to fetch questions:', response.data.message);
            }
          })
          .catch(error => {
            console.error('Error fetching questions:', error);
          });
    },
    calculateScore() {
      const correctAnswers = this.questions.filter(q => q.studentTrueOrFalse).length;
      const questionLength = this.questions.length;
      this.score = (correctAnswers / questionLength * 100).toFixed(2);
      console.log(this.score)// Total number of correct answers
    },
    getQuestionType(type) {
      switch(type) {
        case 'single_choice': return '单选题';
        case 'true_false': return '判断题';
        case 'tianKongTi': return '填空题';
        default: return '未知类型';
      }
    }
  }
};
</script>

<style scoped>
.score {
  font-size: 20px;
  font-weight: bold;
  color: #2980b9;
  text-align: center;
  margin-top: 20px;
}
.correctness {
  font-weight: bold;
  margin-top: 10px;
  text-align: left !important;
}
.correct {
  color: #27ae60; /* 状态正确时为绿色 */
}
.incorrect {
  color: #e67e22; /* 状态错误时为红色 */
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
  text-align: center;
  color: #333;
}
.question-item {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.question-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #2c3e50;
}
.question-content {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #34495e;
  text-align: left !important;
}
.options {
  margin-bottom: 15px;
}
.option {
  margin-bottom: 8px;
  color: #555;
  text-align: left !important;
}
.answer {
  font-weight: bold;
  color: #000; /* 学生答案颜色改为黑色 */
  text-align: left !important;
  margin-bottom: 5px;
}
.correct-answer {
  font-weight: bold;
  color: #27ae60; /* 正确答案颜色为绿色 */
  text-align: left !important;
}
.question-type {
  font-style: italic;
  color: #7f8c8d;
  margin-top: 10px;
  text-align: left !important;
}
.chapter {
  font-style: italic;
  color: #7f8c8d;
  margin-top: 5px;
  text-align: left !important;
}
.details {
  margin-top: 10px;
  color: #7f8c8d;
  font-size: 14px;
  text-align: left !important;
}
.true-false {
  margin-top: 10px;
  text-align: left !important;
}
.fill-in {
  margin-top: 10px;
  text-align: left !important;
}
.answer-text {
  margin-top: 10px;
  color: #555;
}
.input-box {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  margin-top: 5px;
}
</style>